Je nach Aufruf dieser Datei zeigt diese ein unterschiedliches aussehen. Verantwortlich dafür ist eine JavaScript Programmierung welche ein CSS-File integriert. Aussehen.

In der obigen Menüzeile kann diese Datei über die Punkte: [ohne css], [K-CSS], [S-CSS], [A-CSS] und [T-CSS] aufgerufen werden. Je nach Aufruf integriet ein kleines JavaScript eine unterschiedliche CSS Datei. Folgende Besonderheiten sind erkennbar:


<h1> Heading 1</h1>

<h2> Heading 2</h2>

<h3> Heading 3</h3>

<h4> Heading 4</h4>

<h5> Heading 5</h5>
<h6> Heading 6</h6>

<p>Demgegenüber steht der normale Text.</p>


Physikalische Textauszeichnung 

Nicht Absatzerzeugend. Bei der Physikalischen Textauszeichnung ist der Browser für die Darstellung am Bildschirm verantwortlich. Diese Formatierungen können mit CSS übersteuert werden. In den meissten Fällen macht dies aber nicht viel Sinn.

<p> paragraph, Absatz. Normaler Text.</p>
<b> bold, fett geschriebener Text</b>
<i> italic, kursiv geschriebener Text</i>
<u> underline, unterstrichen geschriebener Text</u>
<strike> durchgestrischen geschriebener Text</strike>
<big> grösser geschriebener Text</big>
<small> schmaler geschriebener Text</small>
<s> Strikethourgh, durchgestrichener Text</s>
Zur Verwendung von chemischen Formeln, Massenangaben und anderen Zeichen: m3 oder H2O existiert Superscript <sup>3</sup> und Subscript <sub>2</sub>. Hoch- und tiefgestellt. Möglicherweise wird durch die Verwendung dieser Codierung der normale Zeilenabstand vergrössert.

Logische Textauszeichnung 

Nicht Absatzerzeugend. Die logische Textauszeichnung wird ohne Verwendung von CSS in den meisten Browsern einheitlich dargestellt. Der Einsatz einer Formatierung mit CSS ist angebracht.

In runden Klammern ist der in diesem Projekt angewendete Verwendungszweck aufgeführt.

<abbr> Abkürzung</abbr>
<acronym> Akronym (Initialwort, jeweils erster Buchstabe mehrerer Worte)</acronym>
<address> Adresse</adress>
<au> Beispiel</au> (Bedienung im Programm)
<cite> Zitat (Untergeordnete Erklärungen)</cite>
<code> Text für Quellcode (Code von Webseiten oder Programmen, alte Version)</code>
<del> Gelöschter Text</del>
<dfn> Definition (Zu erledigende Aufgaben) </dfn>
<em> emphatisch, betont (Warnungen, Hinweise)</em>
<ins> Eingefügter Text</ins>
<kbd> über Keyboard einzugebender Text</kbd>
<lang> Lang</lang>
<person>Person</person>
<q> Quote / Zitat</q>
<samp> Sample. Beispieltext</samp>
<span> Sample. Beispieltext</span>
<strong>, stark betont; Allgemeine Hervorhebung</strong>
<tt> Teletyper. Dicktenglleicher Text<tt>
<var> Variabel (Daten aus Datenbank)<var>

Logische Textauszeichnung 

Absatzerzeugend

<blockquote> Geblocktes Zitat(Einführungstexte am Seitenbeginn)</blockquote>
<pre>Preformatierter Text(Code von Webseiten oder Programmen, neue Version)</pre>

Tabellen

Anzahl Artikel Preis
3 Schuhe 85.00
6 Bändel 1.20
6 Socken 12.50
3 Hosen 98.50
Die links stehende Tabelle zeichnet sich durch die alternierenden Farben pro Datensatz aus, während die rechts stehende Tabelle ein statischer Hintergrund prägt.
NameVornameZuständig
TrendyTamaraAdministration
MusterHansTransport
HeidySchweizerInkasso
TellWilhelmCorporate Design

Fensteraufbau

Seitenkopf
Schuhe 85.00
Bändel 1.20

Listen

ordered list, Nummerierungen

  1. Der Boss hat immer recht
  2. Sollte er mal nicht recht haben, tritt automatisch Nr.1 in Kraft

unordered list, Bullet-Listen

Menü Liste (nur einzeilig)

  • Datei: Kleinste Einheit in dieser Hirarchie. Beinhaltet die wirklichen Informationen.
  • Verzeichnis: Vergleichbar mit einem Ordner. Beinhaltet Dateien und dient somit der Ordnung.
  • Laufwerk: Vergleichbar mit dem Schrank. Beinhaltet Verzeichnisse und dient somit der Ordnung.
  • dir Liste

  • Windows
  • Linux
  • UNIX
  • OS/390
  • Glossar

    HTML
    Seitenbeschreibungssprache, einfache Befehle zur Darstellung von Text, Tabellen und Verweisen. Ohne Anspruch auf Farbechtheit oder Pixelpräzision.
    CSS
    Formatierungsbefehle für HTML-Tag's. Reduziert die Dateigrösse durch Formatdefinition in externen Dateien. Ebenso wird die Korrektur des Layout vereinfacht.
    JavaScript
    Programmiersprache für den Clientseitigen Einsatz. Geeignet für die Prüfung von Formulareingaben oder die Erzeugung von Dynamischen Effekten. Dies wird oft in Zusammenhang mit CSS realisiert.

    Die Frontpage-Formatvorlagen

    In Frontpage werden wie in Word Formatvorlagen verwendet. Nicht immer ist jedoch ganz klar welche Formatvorlage welchem Tag entspricht. Hier die Auflösung: (Vorsicht, die Formatierung ist vom CSS abhängig!) Frontpage erlaubt das verwenden von CSS-Klassen.

    Formatvorlage Tag Aussehen
    Normal
    STRG-Shift-N
    <p> Das ist ein ganz normaler Text
    Formatiert <pre>
    Dieser Text ist formatiert.
    Adresse <address>
    Dieser Text hat das Aussehen einer Adresse.
    Überschrift 1-6
    STRG-ALT-1-6
    <h1> bis <h6>

    Titel 1

    Titel 2

    Titel 3

    Titel 4

    Titel 5
    Titel 6
    Nummerierung <ol> und <li>
    1. Der Scheff hat immer Recht
    2. Sollte er mal nicht Recht haben, tritt automatisch Punkt 1 in Kraft.
    Aufzählung <ul> und <li>
    • Vorspeise
    • Hauptspeise
    • Nachspeise
    Verzeichnisliste <dir> und <li>
  • Windows
  • System
  • Sys32
  • Menüliste <menu> und <li>
  • Käsekuchen
  • Kirschwähe
  • Fondue
  • Definierter Begriff <dl> und 
    <dt><dd>
    Definition
    Klare Erklärung eines oder mehrere Worte.
    Erklärung
    Umschreibung eines Begriffes um dessen Verständnis zu erläutern.

    Zeichenformate in Frontpage
                         
    Unterstichen Test <u></u> Kapitälchen Test *2 Beispiel Test <samp></samp>
    Durchgestrichen Test <strike></strike> Grossbuchstaben Test *3 Definition Test <dfn></dfn>
    Überstrichen Test *1 Initalen gross Test *4 Zitat Test <cite></cite>
    Blinken Test <blink></blink> Verborgen Test *5 Variable Test <var></var>
    Hochgestellt Test <sup></sup> Betont Test <strong></strong> Tastatur Test <kbd></kbd>
    Tiefgestellt Test <sub></sub> Hervorgehoben Test <em><em> Code Test <code></code>

    Mit Stern (*) gekennzeichnete Elemente sind spezielle Formatierungen welche mit CSS nicht direkt beeinflusst werden können.

    *1 <span style="text-decoration: overline"></span>

    *2 <span style="font-variant: small-caps"></span>

    *3 <span style="text-transoform: uppercase"></span>

    *4 <span style="text-transoform: capitalize"></span>

    *5 <span style="visibility: hidden"></span>

    Die Klassen

    In diesem Abschnitt sind die im Logisch-Web verwendeten Klassen mit Beispiel aufgelistet.

    Einzelne Worte

    Abschnitte

    Ihre Aufgabe

    Schritt für Schritt-Anleitung

    1. Wählen Sie im Menü Datei->Drucken
    2. Klicken Sie auf die Schaltfläche [Druckvorschau]

    Sinn der Aufgabe

    Sie lernen die unterschiedlichen Befehle und deren Wirkung auf die Browser kennen.

    Randbemerkungen

    Tipp
    Das ist ein kleiner Tipp am Rande

    Mit Hilfe kleiner Rahmen am rechten Bildschirmrand werden die Leser auf kleine Bemerkungen aufmerksam gemacht.